<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capale" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="email=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalale=no"/>
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<!-- <meta http-equiv="refresh" content="5">-->
 <title>Insert title here</title>
</head>
<style type="text/css">
	html{
		position:relative;
		width:100%;
		height:100%;
		background:#ccc;
		background-image:linear-gradient(rgb(110,110,150),rgb(110,110,200));
		margin:0;
		padding:0;
	}
	body{
		margin:0;
		padding:0;
	}
	.container{
		position:relative;
	}
	.nav-bar{
		background-color:#ccc;
		position:relative;
		border-bottom:1px solid #000;
	}
	.menu-bar{
		float:right;
		overflow:hidden;
		background-color:#ccc;
	}
	.menu-bar ul{
		float:right;
		overflow:hidden;
		padding:0;
		margin:0;
		background-color:#ccc;
	}
	.menu-bar ul li{
		float:left;
		overflow:hidden;
	}
	.menu-bar ul li a{
		display:inline-block;
		padding:5px 8px;
		border:1px solid #000;
		border-radius:5px;
		background-color:#4caf50;
		text-decoration:none;
		font-weight:bolder;
		margin:0;
	}
	.side-bar-btn{
		display:block;
		padding:5px 8px;
		border:1px solid #000;
		border-radius:5px;
		background-color:#4caf50;
		text-decoration:none;
		font-weight:bolder;
		margin:0;
	
		transition:background-color .5s;
	}
	.side-bar-btn:hover{
		background-color:#ccc;
	}
	.nav-box-bar:hover ul{
		display:block;
	}
	.nav-box-bar{
		position: relative;
  		display: inline-block;
	}
	.nav-box-bar ul li{
		overflow:hidden;
	}
	.nav-box-bar:hover .side-bar-down{
		 display: block;
 		 margin:0;
  		 padding:0;
		left:0;
	}
	.nav-box-bar ul{
		 display: block;
 		 position: absolute;
 		 margin-top:0px;
		margin-left:-200%;
 		 overflow:hidden;
		left:-800%;
		transition:left 0.9s;
  		background-color: #f9f9f9;
  		min-width: 160px;
  		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}
	.nav-box-bar ul li a{
		display:block;
		padding:5px 8px;
		border:1px solid #000;
		background-color:#4caf50;
		text-decoration:none;
		font-weight:bolder;
		margin:0;
	}
	
</style>
</head>
<body>
	<div class="container">
		<div class="nav-bar">
			<div class="nav-box-bar">
				<button class="side-bar-btn">菜单</button>
				<ul class="side-bar-down">
						<li><a class="active" href="#home">主页</a></li>
						<li><a href="#home">主页</a></li>
						<li><a href="#home">主页</a></li>
						<li><a href="#home">主页</a></li>
				</ul>
			</div>
			<div class="menu-bar">
				<ul>
					<li><a class="active" href="#home">主页</a></li>
					<li><a href="#home">主页</a></li>
					<li><a href="#home">主页</a></li>
					<li><a href="#home">主页</a></li>
				</ul>
		    </div>
		</div>
	</div>
</body>
<html>